<template>
  <div class="content">
    <van-search
      v-model="searchStr"
      placeholder="搜索支持的线路"
      @search="onSearch"
      @cancel="onCancel"
      @clear="onClear"
      v-focus
    />
    <div class="list">
      <div class="item" v-for="(item,i) in list" :key="i">
        <div class="name">{{item.line_name}}</div>
        <div>{{item.start_st}} — {{item.end_st}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchStr: "",
      list: [
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        },
        {
          name: "一号线",
          fromTo: "安德门 — 迈皋桥"
        }
      ],
      datas: {
        service_id: "01",
        line_no: "01",
        page_no: "1",
        page_size: "99"
      }
    };
  },
  //执行方法
  created() {
    this.onSearch("");
  },
  methods: {
    onSearch(val) {
      let vals = { keyword: val };
      this.$http
        .post("https://m.mynj.cn:11005/metro/info/support_line", vals)
        .then(res => {
          this.list = res.data.data;
        });
    },
    onCancel() {
      console.log("取消");
      this.onSearch("");
    },
    go() {
      history.go(-1);
    },
    onClear() {
      console.log("清除");
      this.onSearch("");
    }
  },
  directives: {
    focus: function(el) {
      el.focus();
      el.style.color = "red";
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  height: 100vh;
  background-color: #f2f2f2;
  box-sizing: border-box;
  padding: 7px 12px;
  & >>> .van-search {
    margin-bottom: 7px;
    padding: 0;
    .van-search__content {
      background-color: #fff;
    }
  }
  .list {
    background-color: #fff;
    border-radius: 6px;
    padding: 0 23px;
    .item {
      padding: 13px 0;
      border-bottom: 1px solid #e8e8e8;
      font-size: 14px;
      font-weight: 400;
      color: #999;
      &:last-child {
        border-bottom: 0;
      }
      .name {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 5px;
      }
    }
  }
}
</style>